<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.box {
				position: relative;
				width: 700px;
				height: 700px;
				background: #00BFFF;
				margin: 0 auto;
			}

			#myCan1 {
				/* background-color: lightskyblue; */
				transition: all 5s;
			}

			#myCan2 {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				border-radius: 50%;
				background-color: rgba(0, 0, 0, 0.3);
			}

			.btn {
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				margin: auto;
				width: 150px;
				height: 150px;
				border: none;
				outline: none;
				border-radius: 50%;
				cursor: pointer;
				background-color: transparent;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<canvas id="myCan1" width="700px" height="700px"></canvas>
			<canvas id="myCan2" width="250px" height="250px"></canvas>
			<button type="button" class="btn">抽奖</button>
		</div>
		<script type="text/javascript">
			var oCa = document.getElementById('myCan1');
			var ctxa = oCa.getContext('2d');
			var oCb = document.getElementById('myCan2');
			var ctxb = oCb.getContext('2d');
			var font1 = ['谢谢参与', 1000, 10, 500, 100, 4999, 1, 20];
			var font2 = ['再接再厉', '元', '元', '淘金币', '元', '淘金币', '元', '淘金币'];
			var oBtn = document.querySelector('.btn');
			oBtn.onclick=function(){
				oCa.style.transform = 'rotate(1800deg)';
			}
			

			// 绘制轮盘
			createCircle();
			createText();
			createJiao();
			function createCircle() {
				var startA = 0;
				var endA = 0;
				ctxa.save();
				for (var i = 0; i < 8; i++) {
					startA = -22.5 * Math.PI / 180 + i * Math.PI / 4;
					endA = startA + Math.PI / 4;
					ctxa.beginPath();
					if(i%2==0){
						ctxa.fillStyle = 'pink';
					}else {
						ctxa.fillStyle = 'skyblue';
					}
					ctxa.moveTo(350, 350);
					ctxa.arc(350, 350, 350, startA, endA);
					ctxa.fill();
					ctxa.closePath();
				}
				ctxa.restore();
			}

			function createText() {
				ctxa.save();
				ctxa.translate(350, 350);
				ctxa.fillStyle = 'red';
				ctxa.font = '25px 微软雅黑';
				ctxa.textAlign = 'center';
				for (var i = 0; i < font1.length; i++) {
					ctxa.fillText(font1[i], 0, -300);
					ctxa.save();
					ctxa.font = '18px 微软雅黑'
					ctxa.fillText(font2[i], 0, -250);
					ctxa.restore();
					ctxa.rotate(Math.PI / 4);
				}
				ctxa.restore();
			}
			
			function createJiao(){
				ctxb.save();
				ctxb.translate(125,125);
				ctxb.beginPath();
				ctxb.fillStyle = 'red';
				ctxb.moveTo(0,-125);
				ctxb.arc(0,0,80,-75*Math.PI/180,-105*Math.PI/180);
				ctxb.fill();
				ctxb.closePath();
				ctxb.restore();
			}
		</script>
	</body>
</html>
